<template>
	<u-popup
		v-model="friendShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="prop-title">我的好友</view>
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<!-- 第一行 -->
				<view class="item first-line">
					<view class="order"></view>
					<view class="item-img">
						<image
							src="/static/images/chicken/friend_default.png"
							mode="widthFix"></image>
					</view>
					<view class="item-name">
						<view>加好友一起养小鸡</view>
					</view>
					<view class="item-btn">
						<text>添加好友</text>
						<image
							src="/static/images/chicken/friend_add.png"
							mode="widthFix"></image>
					</view>
				</view>
				<!-- 第二行 -->
				<view class="item second-line">
					<view class="order">15</view>
					<view class="item-img">
						<image
							src="/static/images/chicken/friend_default.png"
							mode="widthFix"></image>
					</view>
					<view class="item-name">
						<view>张三三(自己)</view>
						<view class="small">
							历史收蛋数<text>120颗</text>
							<image
								src="/static/images/chicken/friend_egg.png"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="item-btn">
						
					</view>
				</view>
				<view
					v-for="(val, index) in friendList"
					:key="index"
					class="item">
					<view class="order">
						<image
							v-if="index == 0"
							src="/static/images/chicken/friend_1.png"
							mode="widthFix"></image>
						<image
							v-else-if="index == 1"
							src="/static/images/chicken/friend_2.png"
							mode="widthFix"></image>
						<image
							v-else-if="index == 2"
							src="/static/images/chicken/friend_3.png"
							mode="widthFix"></image>
						<text v-else>{{ index + 1 }}</text>
					</view>
					<view class="item-img">
						<image
							:src="val.img"
							mode="widthFix"></image>
					</view>
					<view class="item-name">
						<view>{{ val.name }}</view>
						<view class="small">
							历史收蛋数<text>{{ val.num }}颗</text>
							<image
								src="/static/images/chicken/friend_egg.png"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="item-btn" @click="goOther(val)">
						去串门 &gt;
					</view>
				</view>
			</scroll-view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_friend.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myFriend',
		props: {
			friendShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				friendList: [
					{
						name: '张三三',
						img: '/static/images/chicken/friend_default.png',
						num: 120,
					},
					{
						name: '李思思',
						img: '/static/images/chicken/friend_default.png',
						num: 119,
					},
					{
						name: '王五',
						img: '/static/images/chicken/friend_default.png',
						num: 118,
					},
					{
						name: '赵六',
						img: '/static/images/chicken/friend_default.png',
						num: 117,
					},
					{
						name: '赵六',
						img: '/static/images/chicken/friend_default.png',
						num: 117,
					},
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'friendShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			goOther(val) {
				this.changeShow();
				this.$emit('goOtherFriend', val);
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 1126rpx;
		background-color: transparent;
		.prop-title {
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 1;
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: #732011;
			text-align: center;
			letter-spacing: 2rpx;
		}
		.center {
			position: absolute;
			left: 0;
			top: 284rpx;
			z-index: 1;
			width: calc(100% - 20rpx);
			height: calc(100% - 284rpx);
			margin-left: 10rpx;
			text-align: center;
			.item {
				display: flex;
				padding: 28rpx 22rpx 28rpx 12rpx;
				font-size: 28rpx;
				color: #732011;
				.order {
					width: 72rpx;
					height: 72rpx;
					line-height: 72rpx;
					font-size: 24rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.item-img {
					width: 76rpx;
					height: 76rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.item-name {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: calc(100% - 72rpx - 162rpx - 76rpx);
					padding-left: 40rpx;
					text-align: left;
					font-weight: bold;
					image {
						width: 36rpx;
					}
					> view {
						display: flex;
						align-items: center;
					}
					view.small {
						font-size: 24rpx;
						font-weight: normal;
						color: rgba(#732011, .6);
						text {
							display: flex;
							margin: 0 6rpx 0 12rpx;
							color: #F14250;
						}
					}
				}
				.item-btn {
					position: relative;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 162rpx;
					image {
						width: 100%;
					}
					text {
						position: absolute;
						left: 0;
						top: 18rpx;
						display: flex;
						justify-content: center;
						z-index: 11;
						width: 100%;
						height: 100%;
						font-weight: bold;
						color: #fff;
					}
				}
				&:not(:first-of-type) {
					border-bottom: 1px solid rgba(#9C6D44, .15);
				}
				&.second-line {
					background-color: #FCF1DD;
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 46rpx;
		}
	}
}
</style>